<template>
	<div id="aside">
		<el-row class="tac">
			<el-col :span="24">
				<el-menu style="min-height: calc(100vh - 65px);" :default-active="active" class="el-menu-vertical-demo"
					router @open="handleOpen" @close="handleClose" text-color="#333" active-text-color="#fff">
					<el-menu-item index="/process" v-if="$store.state.userType==3 || $store.state.userType==4">
						<i class="iconfont icon-liucheng"></i>
						<span slot="title">使用流程</span>
					</el-menu-item>
					<el-menu-item index="/" v-if="$hasPermission('api/tongji/total')">
						<i class="iconfont icon-tongji"></i>
						<span slot="title">数据统计</span>
					</el-menu-item>
					<el-menu-item index="/factory/info" v-if="$hasPermission('api/factory/factory_edit')">
						<i class="iconfont icon-gongchang-01"></i>
						<span slot="title">工厂信息</span>
					</el-menu-item>
					<el-menu-item index="/company/info" v-if="$hasPermission('api/corp/corp_edit')">
						<i class="iconfont icon-qiye"></i>
						<span slot="title">企业信息</span>
					</el-menu-item>
					<el-menu-item index="/company" v-if="$hasPermission('api/corp/getlist')">
						<i class="iconfont icon-qiyeguanli"></i>
						<span slot="title">企业管理</span>
					</el-menu-item>
					<el-menu-item index="/factory" v-if="$hasPermission('api/factory/getlist')">
						<i class="iconfont icon-gongchangwulimoxing"></i>
						<span slot="title">共享工厂</span>
					</el-menu-item>
					<el-menu-item index="/order" v-if="$hasPermission('api/order/getlist')">
						<i class="iconfont icon-dingdan"></i>
						<span slot="title">需求订单</span>
					</el-menu-item>
					<el-menu-item index="/contract" v-if="$hasPermission('api/coupons/getlist')">
						<i class="iconfont icon-icon_huabanfuben"></i>
						<span slot="title">合同管理</span>
					</el-menu-item>
					<el-submenu index="baobiao" class="ss_menu"
						v-if="$hasPermission('api/tongji/getlist') || $hasPermission('api/tongji/zongji')">
						<template slot="title">
							<div class="ss_item">
								<i class="iconfont icon-baobiao-1"></i>
								<span slot="title">报表管理</span>
							</div>
						</template>
						<el-menu-item index="/statistics/company"
							v-if="$hasPermission('api/tongji/factory_tongji')">工厂统计</el-menu-item>
						<el-menu-item index="/statistics/report"
							v-if="$hasPermission('api/tongji/getlist')">报表统计</el-menu-item>
						<el-menu-item index="/statistics/chart"
							v-if="$hasPermission('api/tongji/zongji')">图表统计</el-menu-item>
					</el-submenu>
					<el-submenu index="sys" class="ss_menu"
						v-if="$hasPermission('api/tongji/getlist') || $hasPermission('api/settings/detail') || $hasPermission('api/settings/setting_sms') || $hasPermission('api/adminlog/getlist')|| $hasPermission('api/settings/setting_sms')">
						<template slot="title">
							<div class="ss_item">
								<i class="iconfont icon-shezhi"></i>
								<span slot="title">系统设置</span>
							</div>
						</template>
						<el-menu-item index="/sys/edSet"
							v-if="$hasPermission('api/settings/setting_sms')">额度设置</el-menu-item>
						<el-menu-item index="/sys/basicSet"
							v-if="$hasPermission('api/settings/detail')">基础设置</el-menu-item>
						<el-menu-item index="/sys/messageSet"
							v-if="$hasPermission('api/settings/setting_sms')">短信设置</el-menu-item>
						<el-menu-item index="/sys/autoshenhe"
							v-if="$store.state.userType==1">自动审核</el-menu-item>
						<el-menu-item index="/sys/authSet"
							v-if="$hasPermission('api/authgroup/getlist')">权限管理</el-menu-item>
						<el-menu-item index="/sys/log"
							v-if="$hasPermission('api/adminlog/getlist') && $store.state.userType==1">操作日志</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		data() {
			return {
				active: ''
			}
		},
		created() {},
		watch: {
			$route: {
				immediate: true,
				handler(val) {
					let path = val.path;
					this.active = path
				}
			}
		}
	}
</script>
<style scoped>
	#aside {
		height: 100%;

		.is-active {
			background-color: #409EFF;

			.ss_item {
				i {
					color: #fff !important;
				}

				span {
					color: #fff;
				}
			}
		}
	}

	.el-menu-item {
		font-weight: 500;
	}

	.is-active /deep/ .el-submenu__title:hover {
		background: none;
	}

	.el-submenu .is-active {
		background: transparent !important;
		color: #409EFF !important;
	}

	.el-menu-item i,
	.el-submenu i {
		margin-right: 5px;
	}
</style>